<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>001-base-use-case</title>
    <script src="models/vue.dev.js"></script>
    <style>
        fieldset {
            border-inline: none;
            border-bottom: none;
        }

        legend {
            font-weight: bold;
            padding-inline: 1rem;
        }

        legend::before {
            content: '[ ';
        }

        legend::after {
            content: ' ]';
        }

        i {
            background-color: gainsboro;
        }
    </style>
</head>

<body>
    <noscript>当前环境不支持JavaScript</noscript>

    <!-- APP开始 -->
    <div id="app">
        <p>
            动态数据伴随全局刷新：
            {{ new Date().getTime() }}
        </p>

        <fieldset>
            <legend>v-bind</legend>
            <i>用于将值动态绑定到元素的属性、属性或事件侦听器，可用:代替前缀。</i>

            <p>message内容 {{ message }}</p>
            <p v-bind:title="title">
                鼠标悬停几秒钟查看此处动态绑定的提示信息
            </p>
            <p :title="title">
                鼠标悬停几秒钟查看此处动态绑定的提示信息（写法二）
            </p>
            <p>
                注意跟v-model区分<input type="text" :value="message" />
            </p>
        </fieldset>

        <fieldset>
            <legend>v-model</legend>
            <i>用于在表单元素和组件上创建双向数据绑定。它可以自动监听用户输入和组件的值变化，实现数据的双向绑定。</i>

            <p>
                点击选框
                <input type="checkbox" v-model:value="seen" />
                {{ seen }}
            </p>

            <p>
                修改内容
                <input type="text" v-model:value="message" />
                {{ message }}
            </p>
        </fieldset>

        <fieldset>
            <legend>v-if v-else v-else-if</legend>
            <i>用于根据表达式的值来条件性地渲染元素。</i>

            <p>
                点击选框
                <input type="checkbox" v-model:value="seen" />
                <span v-if="seen">可以看见我了</span>
            </p>
            
            <p>
                修改内容
                <input type="number" v-model:value="num" />
                <span v-if="num < 10">数值小于10</span>
                <span v-else-if="num < 100">数值小于100</span>
                <span v-else>数值为 {{ num }}</span>
            </p>
        </fieldset>

        <fieldset>
            <legend>v-for</legend>
            <i>用于基于源数据多次渲染元素或组件。</i>

            <p>简单循环</p>
            <ol>
                <li v-for="item in list1">{{ item }}</li>
            </ol>

            <p>简单循环（带索引）</p>
            <ul>
                <li v-for="(item, index) in list1">{{ index + " -> " + item }}</li>
            </ul>

            <p>循环对象</p>
            <ul>
                <li v-for="item in list2">{{ item.name + ': ' + item.age }}</li>
            </ul>

            <p>循环对象（写法二）</p>
            <ul>
                <li v-for="{name, age} in list2">{{ name + ': ' + age }}</li>
            </ul>

            <p>循环对象（带索引）</p>
            <ul>
                <li v-for="({name, age}, index) in list2">{{ index + " -> " + name + ': ' + age }}</li>
            </ul>

            <p>循环指定次数</p>
            <ul>
                <li v-for="index in 3">{{ index }}</li>
            </ul>
        </fieldset>

        <fieldset>
            <legend>v-on</legend>
            <i>用于绑定事件处理函数，可用@代替前缀。</i>

            <span>{{ message }}</span>
            <p>
                <button v-on:click="reverse">点击反转message</button>
            </p>
            <p>
                <button @click="reverse">点我也可以（写法二）</button>
            </p>
        </fieldset>
    </div>
    <!-- APP开始结束 -->

    <script>
        var app = new Vue({
            // 通过选择器绑定元素
            el: "#app",
            // 数据写在data里面
            data: {
                message: 'Hello Vue!',
                title: '页面加载于 ' + new Date().toLocaleString('zh'),
                seen: false,
                num: 0,
                list1: [...new Array(3)].map(Math.random),
                list2: [{ name: "Jack", age: 24 }, { name: "Ruse", age: 22 }]
            },
            // 函数写在methods里面
            methods: {
                reverse(...e) {
                    console.log(e);
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>